<template>
	<view class="container">
		<view class="header">
			<view class="search">
				<u-search placeholder="请输入产品" v-model="keyword" :showAction="false" bgColor="#f7f8fa" @search="search"></u-search>
			</view>
		</view>

		<scroll-view v-if="list.length > 0" class="list" :scroll-y="true" :scroll-top="top" :refresher-triggered="triggered"
			:refresher-enabled="true" :lower-threshold="100" @refresherrefresh="onRefresh" @scrolltolower="onBottom"
			@scroll="onScroll" :style="{height: `${height}px`}">
			<navigator :url="`/pages/validate/info?code=${item.query_code}`" class="item" v-for="item in list" :key="item.id">
				<view class="title">
					{{item.product.name}}
				</view>

				<view class="line"></view>

				<view class="son-list">
					<view class="son-item">
						<view class="name">
							查询次数：
						</view>
						<view class="value">
							{{item.query_num}}
						</view>
					</view>

					<view class="son-item">
						<view class="name">
							您查询的防伪码：
						</view>
						<view class="value">
							{{item.query_code}}
						</view>
					</view>

					<view class="son-item">
						<view class="name">
							首次查询时间：
						</view>
						<view class="value">
							{{item.query_time}}
						</view>
					</view>

					<view class="son-item">
						<view class="name">
							二维码：
						</view>
						<view class="value">
							<image src="/static/images/code.png" />
						</view>
					</view>
				</view>
			</navigator>
			<!-- 加载更多的提示 -->
			<u-loadmore :status="status" marginBottom="40" fontSize="20" lineColor="#1CD29B" dashed line />
		</scroll-view>
	
		<!-- 返回顶部 -->
		<u-back-top :scroll-top="top" @click="BackTop"></u-back-top>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				triggered: false, // 下拉刷新状态
				Isfreshing: false, //防止重复刷新
				list: [],
				page: 1,
				limit: 5,
				business: {},
				status: 'loadmore',
				keyword: '',
				top: 0,
				height: 0, //页面高度
			}
		},
		onShow() {
			//获取本地存储
			var business = uni.getStorageSync('business') ? uni.getStorageSync('business') : {}

			// 判断对象是否为空
			if (Object.getOwnPropertyNames(business).length > 0) {
				this.business = business
				this.onRefresh()
			} else {
				//没有登录
				uni.$u.route({
					type: 'reLaunch',
					url: '/pages/validate/validate'
				})
				return false
			}
		},
		onReady() {
			//调用uni接口 获取页面的高度
			uni.getSystemInfo({
				success: (res) => {
					this.height = res.windowHeight
				}
			})
		},
		methods: {
			// 搜索框
			search(){
				this.onRefresh()
			},
			//上拉加载
			onBottom() {
				this.ProductData()
			},
			//返回顶部
			BackTop(){
				this.top = 0
			},
			//监听页面滚动
			onScroll(e){
				this.top = e.detail.scrollTop
			},
			//下拉刷新
			onRefresh() {
				//防止重复下拉刷新
				if (this.Isfreshing) return;

				//执行一次下拉刷新
				this.Isfreshing = true

				//判断是否处于下拉刷新中
				if (!this.triggered) this.triggered = true //正在下拉刷新中

				this.page = 1;
				this.list = [];

				//请求数据
				this.ProductData()
			},
			async ProductData() {
				let result = await this.$u.api.business.product({
					busid: this.business.id,
					page: this.page,
					keyword: this.keyword,
					limit: this.limit
				})

				if (this.triggered) this.triggered = false
				if (this.Isfreshing) this.Isfreshing = false
				this.status = 'loadmore'

				if (result.code == 0) {
					//没有更多数据
					this.status = 'nomore'
					return false
				}

				this.list = this.list.concat(result.data);
				this.page++;
			}
		}
	}
</script>

<style>
	page {
		background-color: #eee;
	}

	.container {
		width: 95%;
		margin: 0 auto;
	}

	.header {
		background-color: #fff;
		padding: 10px 0;
		margin-top: 10px;
		border-radius: 10px;
	}

	.header .search {
		width: 95%;
		margin: 0 auto;
	}

	.item {
		background: #fff;
		border-radius: 10px;
		overflow: hidden;
		margin-top: 10px;
		padding: 0 10px 10px;
	}

	.item .title {
		padding: 10px 0 10px 10px;
		font-size: 20px;
	}

	.item .line {
		width: 100%;
		height: 1px;
		background: #ebebeb;
		margin: 0 auto;
		margin-bottom: 10px;
	}

	.item .son-list .son-item {
		display: flex;
		justify-content: space-between;
		font-size: 14px;
		margin-bottom: 10px;
	}

	.item .son-list .son-item .name {
		color: #9b9b9a;
	}

	.item .son-list .son-item image {
		width: 30px;
		height: 30px;
	}
</style>